<template>
    <div style="margin: 30px 0">
            <el-form :inline="true">
                <el-form-item label="转出仓库">
                    <el-select v-model="storeId" size="medium" @change="handleChange">
                        <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="转入仓库">
                    <el-select v-model="storeId" size="medium" @change="handleChange">
                        <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
                    </el-select>
                    <el-select v-model="inputAreaId" size="medium" @change="handleChangetype">
                        <el-option :value="item.id" :label="item.areaName" v-for="item in deptData" :key="item.index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                        <span >{{inType}}余量 : {{unusedNum}}</span>
                        <!-- <span  v-else>(新酒货位)余量 : {{unusedNum}}</span> -->
                </el-form-item>
                <el-form-item label="" style="margin-left:50px">
                    <el-button type="primary" size="medium" @click="sureAllcat">确定调拨</el-button>
                    <el-button type="warning" size="medium" @click="Allcatrecord">调拨记录</el-button>
                </el-form-item>
            </el-form>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                storeId:'',
                inputAreaId:'',
                selectedOptions:[],
                deptData:[],
                inType:'',
                unusedNum:''
            }
        },
        mounted () {
            this.area();
        },
        methods: {
            handleChangetype(id){
                this.numinfo(id)
                this.$emit("handleChangetype", id);
            },
            handleChange(id){
                this.inputAreaId = '';
                this.areainfo(id)
                this.$emit("handleChange", id);
            },
            sureAllcat(){

            },
            Allcatrecord(){

            },
            async area() {
            
            try {
             
              let { data } = await this.$post({
                api: "/show/store/area"
                
              });
              
              if (data.code === 0) {
                this.selectedOptions = data.data;
              console.log(data)
              } else {
                this.$message({
                  type: "error",
                  message: data.msg
                });
              }
            } catch (e) {
              // this.$message({
              //   type: "error",
              //   message: "接口报错"
              // });
            }
          },
            //根据仓库id货位
           async areainfo(id) {
              try {
                let { data } = await this.$post({
                  api: "/show/store/areainfo",
                  data:{
                    storeId:id
                  }
                });
                if (data.code === 0) {
                  
                  this.deptData = data.data;
                  // this.inType = data.data[0].areaType;
                  // this.unusedNum = data.data[0].unusedNum;
                console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           //根据仓库找数量
           async numinfo(id) {
              try {
                let { data } = await this.$post({
                  api: "/show/area/num",
                  data:{
                    // areaId:this.storeId,
                    areaId:id
                  }
                });
                if (data.code === 0) {
                  
                  // this.deptData = data.data;
                  this.inType = data.data.area_type;
                  this.unusedNum = data.data.unused_num;
                console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
        }
    }
</script>